<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import pageContainer from '@/components/pageContainer.vue';
import { useUserStore } from '@/stores';
import {userInfoPeopleService} from '@/api/user'
//数据绑定
const formRef=ref()
const {user:{
    id,username,nickname,email,user_pic
}}=useUserStore()
// 表单数据
const formData = ref({
    id,
  loginName: '',
  nickname,
  email,
});
// 表单校验规则
const rules = {
  nickname: [
    { required: true, message: '用户昵称不能为空', trigger: 'blur' },
    { min: 2, max: 12, message: '用户昵称长度必须在2到12个字符之间', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
  ],
};
// 提交表单
const submitForm = async() => {
    try{
        await formRef.value.validate()
    await userInfoPeopleService(formData.value)
    ElMessage.success('用户个人资料修改成功')
    }catch(error){
        ElMessage.error('个人资料修改失败')
        console.error('error')
    }
 
};
</script>


<template>
<pageContainer title="用户基本资料">
    <el-form
      :model="formData"
      :rules="rules"
      ref="formRef"
      label-width="100px"
      class="form-container"
    >
      <!-- 登录名称 -->
      <el-form-item label="登录名称">
        <el-input v-model="formData.loginName" placeholder="请输入登录名称" disabled />
      </el-form-item>

      <!-- 用户昵称 -->
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
      </el-form-item>

      <!-- 用户邮箱 -->
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="请输入用户邮箱" />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交修改</el-button>
      </el-form-item>
    </el-form>
</pageContainer>


</template>
<style scoped>
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
</style>